/*
 * @Author: cmf
 * @Date: 2020-10-23 13:06:26
 * @LastEditTime: 2021-06-18 15:58:14
 * @LastEditors: Please set LastEditors
 * @Description: 公共的页面上的Tbale
 * @FilePath: \evdata\src\BaseTable\index.tsx
 */
import * as React from 'react';
import { useState, useEffect, FC, useRef, useMemo, ReactNode } from 'react';
import { Table } from 'antd';
import { TableProps } from 'antd/lib/table';
import classNames from 'classnames';
import { useSize } from 'ahooks';
import { CPageViewContent } from '../PageViewPro/indexStyle';
export interface BaseTableProps extends TableProps<any> {
  /** solt插槽 description */
  soltNode?: ReactNode | (() => ReactNode);
  scrollWidth?: number | string;
}
// 表格大小
export interface TableSize {
  width?: number;
  height?: number;
}
const BaseTable: FC<BaseTableProps> = props => {
  const { dataSource, soltNode, scrollWidth, ...restProps } = props;

  const tableRef = useRef<HTMLDivElement>(null);
  const tableClass = classNames('base-table', {
    'table-no-data': dataSource && dataSource.length === 0,
  });
  /**
   * @description: table 大小改变
   * @param {*}
   * @return {*}
   */
  const tableSize: TableSize = useSize(tableRef);
  const tableScroll = useMemo(() => {
    if (dataSource && dataSource.length > 0 && tableSize.height) {
      return {
        y: tableSize.height - 125,
        x: scrollWidth,
      };
    } else {
      return {
        x: scrollWidth,
      };
    }
  }, [tableSize, dataSource]);

  const node = typeof soltNode === 'function' ? soltNode() : soltNode;
  return (
    <>
      <CPageViewContent ref={tableRef}>
        {soltNode && node}
        <Table
          dataSource={dataSource}
          className={tableClass}
          scroll={tableScroll}
          {...restProps}
        ></Table>
      </CPageViewContent>
    </>
  );
};

export default BaseTable;
